<template>
	<div class="user">
	  <div class="user_base">
		  <p>
			  <img v-bind:src="userInf.headimgurl" style="border:1px solid #888888;"/>
			</p>
			<p class="mt2 colorff">{{userInf.nickname}}</p>
	 </div>

<!---->
	 <a href='claim.html'><div class="item_box clearFloat">
	   <p class="fl">
		   <img src="images/panish.png" class="mr10"/>未发布任务</p>
		 <p class="fl txr">
		   <img src="images/last.png"/>
		 </p>
	 </div></a>
	 <!---->
	 	 <a href='claim.html'><div class="item_box clearFloat mt2">
	 	   <p class="fl">
			   <img src="images/Claimed.png" class="mr10"/>已被认领任务</p>
	 		 <p class="fl txr">
	 		   <img src="images/last.png"/>
	 		 </p>
	 	 </div></a>
		 <!---->
		 	 <a href="claim.html"><div class="item_box clearFloat mt2">
		 	   <p class="fl">
				   <img src="images/Claim.png" class="mr10"/>待认领任务</p>
		 		 <p class="fl txr">
		 		   <img src="images/last.png"/>
		 		 </p>
		 	 </div></a>
			 <!---->
			 	 <div class="item_box clearFloat mt2">
			 	   <p class="fl">
					   <img src="images/loseEfficacy.png" class="mr10"/>已失效任务</p>
			 		 <p class="fl txr">
			 		   <img src="images/last.png"/>
			 		 </p>
			 	 </div>
				 <!--完成-->
				 	 <div class="item_box clearFloat mt10">
				 	   <p class="fl">
						   <img src="images/finished.png" class="mr10"/>已完成任务</p>
				 		 <p class="fl txr">
				 		   <img src="images/last.png"/>
				 		 </p>
				 	 </div>
					 <!--未完成-->
					 	 <div class="item_box clearFloat mt2">
					 	   <p class="fl">
							   <img src="images/unfinished.png" class="mr10"/>未完成任务</p>
					 		 <p class="fl txr">
					 		   <img src="images/last.png"/>
					 		 </p>
					 	 </div>
						 <!--余额-->
		 					<div class="item_box clearFloat mt10">
		 						<p class="fl">
								  <img src="images/balance.png" class="mr10"/>余额</p>
		 						<p class="fl txr">
		 							<span>0.00元</span><img src="images/last.png"/>
		 						</p>
		 					</div>

							<!--帮助-->
							 <div class="item_box clearFloat mt10">
								 <p class="fl">
								   <img src="images/help.png" class="mr10"/> 帮助</p>
								 <p class="fl txr">
									 <img src="images/last.png"/>
								 </p>
							 </div>
	</div>
</template>

<script>
import Vue from 'vue'
import VueResource from 'vue-resource'
Vue.use(VueResource);
export default {
  components: {
	},
  data () {
	  return {
		 userInf: {
		   openid: '',
			 sex: '',
			 province: '',
			 city: '',
			 country: '',
			 headimgurl: '',
		 }
		}
	},
	ready: function () {
	Vue.use(VueResource);
	var that=this
	that.$http({
 		method:'get',
 		emulateJSON: true,
 		url:'http://xyg.bigdatas.top/user_base_info',
 		data:{}
 	 }).then(function(data){
	   if(data.data.data.error == 0){
	   that.userInf = data.data.data
	   }else{
	   console.log('error!')
	   }

 	},function(error){

      })

	}
}
</script>

<!-- 加入scoped是为了防止本组件中的css渗透到其他组件，可以去掉看看结果 -->
<style scoped>
	h1{
		color: black;
	}
	.user{margin-bottom:62px;}
	.user_base{padding:15px 0;background-color:#56ABE4;}
	.user_base p{
	margin:0;
	text-align:center;
	font-size:14px;
	color:#888888;
	}
	.user_base img{width:50px;height:50px;border-radius:50%;}
	.item_box{background-color:#fff;padding:10px 15px;color:#333;color:#333;font-size:14px;height: 20px;
line-height: 20px;}
	.item_box p{width:50%;}
	.item_box p img{width:16px;height:16px;vertical:middle;}
	.clearFloat:after{
	content:'';
	display:block;
	clear:both;
	hisibility:hidden;
	}
	.txr{text-align:right;}
	.fl{float:left;}
	.mt2{margin-top:2px;}
	.mt10{margin-top:10px;}
	.mr10{margin-right:10px; vertical-align:middle;}
	.colorff{color:#fff!important;}
</style>
